<template>
  <view class="page page-grey has-fixed-footer page-activity-goods">
    <view class="goods-list">
      <fui-checkbox-group v-show="filterGoodsList.length" name="checkbox" v-model="checkedGoodsIds" @change="onChangeGoods">
        <fui-label class="goods-item" v-for="item in filterGoodsList" :key="item.id + ''">
          <fui-checkbox scaleRatio="0.8" :value="item.id + ''"></fui-checkbox>
          <image :src="item.imgUrl" style="width: 164rpx; height: 164rpx; border-radius: 16rpx; overflow: hidden;" mode=""></image>
          <view class="goods-item-right">
            <view class="right-title">{{item.name}}</view>
            <view class="right-list">
              <view class="right-text">
                <image src="/static/images/icon-kc.png" style="width: 22rpx; height: 22rpx;"></image>
                库存 <span class="right-number">{{item.stock}}</span><span>{{item.unit}}</span>
              </view>
              <view class="right-text">
                <image src="/static/images/iocn-dj.png" style="width: 26rpx; height: 26rpx;"></image>
                单价 <span class="right-number">{{ utils.moneyFormatter(item.price / 100)}}</span><span>元/{{item.unit}}</span>
              </view>
              <view class="right-text">
                <image src="/static/images/icon-qssl.png" style="width: 24rpx; height: 22rpx;"></image>
                起售数量 <span class="right-number">{{item.startNum}}</span><span>{{item.unit}}</span>
              </view>
            </view>
          </view>
        </fui-label>
      </fui-checkbox-group>
      <fui-empty v-show="!filterGoodsList.length" :isFixed="true" src="/static/images/empty/data.png" title="暂无可选商品" size="24" color="#999"></fui-empty>
    </view>
    <view class="ui-fixed-footer ui-fixed-footer__white">
      <fui-button class="ui-btn-primary_plain" text="取消" height="78rpx" radius="8rpx" :margin="['0', '54rpx', '0', '0']" @click="tab.navigateBack"></fui-button>
      <fui-button text="确定" height="78rpx" radius="8rpx" :margin="['0']" @click="handleSubmit"></fui-button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed, inject } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useStore } from 'vuex'
import utils from '@/components/firstui/fui-utils'
import activityApi from '@/api/activity/supplier'

const store = useStore()
const tab = inject('$tab')
const modal = inject('$modal')

const activityId = ref('')
const isForm = ref('')
const hasActivity = ref(false)
const goodsList = ref([])
const selectedGoodsIds = computed(() => (store.getters.activityGoods || []).map(item => item.id))
const filterGoodsList = computed(() => goodsList.value.filter(item => selectedGoodsIds.value.indexOf(item.id) < 0))

onLoad(async option => {
  activityId.value = option.activityId
  isForm.value = option.isForm
  await activityApi.checkGoodsRange({
    productScope: 31,
    supplierId: store.getters.companyId
  }, true).then(res => {
    hasActivity.value = res.code !== 0
  }).catch(() => {
    hasActivity.value = true
  })
  getGoodsList()
})

const checkedGoodsIds = ref([])
const onChangeGoods = (e) => {
  checkedGoodsIds.value = e.detail.value
}

// 保存
const handleSubmit = () => {
  if (!checkedGoodsIds.value.length) {
    modal.msgError('请至少选择一个商品！')
    return
  }
  const checkedGoodsArr = filterGoodsList.value.filter(item => checkedGoodsIds.value.indexOf(item.id + '') > -1)
  const allCheckedGoodsArr = (store.getters.activityGoods || []).concat(checkedGoodsArr)
  const allCheckedGoodsIds = allCheckedGoodsArr.map(item => item.id)
  if (activityId.value) {
    activityApi.updateActivityGoods({
      id: activityId.value,
      productSpuIds: allCheckedGoodsIds.join(',')
    }).then(res => {
      if (res.code === 0) {
        if(isForm.value != 1) modal.msg('商品已添加！')
        setTimeout(() => {
          tab.navigateBack()
        }, 1000)
      }
    })
  } else {
    store.commit('SET_ACTIVITY_GOODS', allCheckedGoodsArr)
    tab.navigateBack()
  }
}

// 可选商品
const getGoodsList = () => {
  modal.loading('加载中...')
  try {
    const apiUrl = hasActivity.value ? 'getCheckGoodsList' : 'getReleaseGoodsList'
    activityApi[apiUrl](store.getters.companyId).then((res) => {
      if(res.code === 0 && res.data){
        res.data = res.data.list || res.data
        goodsList.value = res.data.map((item) => {
          return {
            ...item,
            startNum: hasActivity.value ? item.startNum : item.qgsl,
            price: hasActivity.value ? item.price : item.qgjg,
            imgUrl: item.sliderPicUrls ? item.sliderPicUrls[0] : JSON.parse(item.picUrl)[0]
          }
        })
        modal.closeLoading()
      }else{
        modal.msgError(res.msg)
      }
    })
  } catch(e){
    modal.closeLoading()
    modal.msgError(e.msg)
  }
}
</script>

<style lang="scss" scoped>
.page-activity-goods {
  padding: 42rpx 36rpx 186rpx;
  .goods-list {
    padding-bottom: 15rpx;
    .goods-item {
      display: flex;
      align-items: center;
      width: 100%;
      background: #ffffff;
      border-radius: 16rpx;
      padding: 28rpx !important;
      box-sizing: border-box;
      margin-bottom: 30rpx !important;

      .fui-checkbox__input {
        margin-right: 24rpx;
      }

      .goods-item-right {
        margin-left: 24rpx;
        width: calc(100% - 188rpx);
        .right-title {
          font-size: 28rpx;
          font-weight: bold;
          color: #333333;
          margin-bottom: 16rpx;
        }
        .right-list {
          display: flex;
          flex-wrap: wrap;
          .right-text {
            width: 100%;
            font-size: 24rpx;
            font-weight: 400;
            color: #999999;
            display: flex;
            align-items: center;
            margin-bottom: 10rpx;

            image {
              padding-right: 10rpx;
            }

            span {
              color: #333333;
            }
            .right-number {
              font-weight: bold;
              color: #2c83fc;
              padding: 0 10rpx;
            }
          }
        }
      }
    }
  }
  .ui-fixed-footer {
    display: flex;
  }
}
</style>